<template>
	<picker range-key="name" class="regionChecked" mode="multiSelector" @columnchange="columnchange" @change="addRegion" :range="array">
		<view class="inp " v-if="form.district">
			{{ form.province + form.city + form.district }}
		</view>
		<view class="inp placeholder" v-if="!form.district">请选择省市区</view>
	</picker>
</template>

<script>
	import ddJson from '@/static/dd.json';
	export default {
		name: 'addressChoice',
		data() {
			return {
				array: [[], [], []],
				form: {},
			};
		},
		mounted() {
			this.array = [ddJson.province, ddJson.city[ddJson.province[0].id], ddJson.city[ddJson.city[ddJson.province[0].id][0].id]];
		},
		methods: {
			columnchange(e) {
				switch (e.detail.column) {
					case 0:
						this.array[1] = ddJson.city[ddJson.province[e.detail.value].id];
						if (!this.array[1][this.middleIndex]) {
							this.middleIndex = 0;
						}
						this.array[2] = ddJson.city[this.array[1][this.middleIndex].id];
						break;
					case 1:
						this.middleIndex = e.detail.value;
						this.array[2] = ddJson.city[this.array[1][e.detail.value].id];
						break;
				}
				this.$forceUpdate();
			},
			addRegion(e) {
				this.form.province = this.array[0][e.detail.value[0]].name;
				this.form.province_id = this.array[0][e.detail.value[0]].id;
				this.form.city = this.array[1][e.detail.value[1]].name;
				this.form.city_id = this.array[1][e.detail.value[1]].id;
				this.form.district = this.array[2][e.detail.value[2]].name;
				this.form.district_id = this.array[2][e.detail.value[2]].id;
				this.$forceUpdate();
				this.$emit('change', this.form);
			},
		},
	};
</script>

<style lang="scss" scoped>
	
	.inp {
		font-size: $uni-font-size-17;
		width: 100%;
		margin: $margin-width 0;
		padding: 0;
	}
	.placeholder {
		color: #666666;
	}
</style>
